import React, { useEffect,useState} from 'react'
import './Login.less'
import { useNavigate} from 'react-router-dom'
import { useDispatch} from "react-redux"
import {LoginApi} from "@/request/api"
import Img from "@/static/images/logo.png"
import {TextField,Button} from '@mui/material'
import {useToast} from "@/utils/toast" 
export default function Login() {
  const [username,setUsername] = useState('')
  const [password,setPassword] = useState('')
  const toast = useToast()
  const dispatch = useDispatch()
  const navigate = useNavigate() 
  const login = async ()=>{
    let res = await LoginApi({
      username:"15940636376",
      password:"wolfcode123"
    })
    console.log(res);
  }
  // useEffect(()=>{
  //   login()
  // },[])
  const gologin = async() => {
   
    if(username === "" || password === ""){
      toast("error","用户名和密码不能为空")
    }else{
      // 请求
      let res =await LoginApi({
          username:username,
          password:password
        })
        console.log(res);
        if(res.errCode === 0){
          toast("success","登录成功")
          // dispatch({
          //   type:"token"
          //   // value:res.token
          // })
          localStorage.setItem("token",res.data)
          setTimeout(()=>{
            navigate('/home')
          },1500)
          console.log(localStorage.getItem("token"));
          
        } else{
          toast("error","用户名或密码错误")
        }
    }
  }
  // login();  
  return (
    <div className='login'>
      
      <img src={Img} alt="" />
      
      <div className='form'>
        <div className='title'>Login Page</div>
      <TextField 
        value={username}
        id="outlined-basic" 
        label="用户名" 
        onChange={(v)=>{setUsername(v.target.value)}} 
        variant="outlined" 
      />
      <TextField 
        value={password}
        id="outlined-basic" 
        label="密码" 
        onChange={(v)=>{setPassword(v.target.value)}} 
        type="password"
        variant="outlined" 
      />
      <Button variant="contained" className='' onClick={gologin}>直接登陆</Button>
      <div className='ding'>
        <div className='fan' onClick={()=>{navigate("/reg")}}>去注册</div>
        <div className='fan fan2' onClick={()=>{navigate("/Home")}}>前往首页</div>
      </div>
      </div>
      <div className='gowhere'>
        
      </div>
      <div>&copy;版权所有 淘淘</div>
    </div>
  )
}
